<template>
  <CommonCard title="累计用户数" :value="reportData.totalUser">
    <template #default>
      <v-chart :option="option"></v-chart>
    </template>
    <template #footer>
      <div class="wrapper">
        <div>
          <span>日同比</span>
          <span class="css-1">{{ reportData.userGrowLastDay }}%</span>
          <span
            :class="{
              increase: reportData.userGrowLastDay > 0,
              decrease: reportData.userGrowLastDay < 0,
            }">
          </span>
        </div>
        <div>
          <span>月同比</span>
          <span class="css-1">{{ reportData.userGrowLastMonth }}%</span>
          <span
            :class="{
              increase: reportData.userGrowLastMonth > 0,
              decrease: reportData.userGrowLastMonth < 0,
            }">
          </span>
        </div>
      </div>
    </template>
  </CommonCard>
</template>

<script setup>
import { ref, watch } from 'vue';
import CommonCard from './CommonCard.vue';

const props = defineProps({
  reportData: {
    type: Object,
    default: () => ({}),
    required: true,
  },
});

const option = ref({});

const rederChart = (v1, v2) => {
  option.value = {
    xAxis: {
      // 让x轴显示数据
      type: 'value',
      show: false,
    },
    yAxis: {
      // 让y轴设置为类目轴
      type: 'category',
      show: false,
    },
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },
    series: [
      {
        type: 'bar',
        data: [v1],
        itemStyle: {
          color: 'green',
        },
        barWidth: 10,
        // 设置统一的stack, 将多个柱子堆叠在一起
        stack: 'total',
      },
      {
        type: 'bar',
        data: [v2],
        itemStyle: {
          color: '#ddd',
        },
        barWidth: 10,
        stack: 'total',
      },
      {
        // 'custom'自定义系列
        type: 'custom',
        //对于 data 中的每个数据项（为方便描述，这里称为 dataItem)，会调用此 renderItem 函数。
        data: [v1],
        /*
        开发者自定义渲染逻辑（renderItem 函数）
            renderItem 函数提供了两个参数：
              params：包含了当前数据信息和坐标系的信息。
              api：是一些开发者可调用的方法集合 
      */
        renderItem: (params, api) => {
          /* 
          api.coord(...)，意思是进行坐标转换计算。
          例如 var point = api.coord([api.value(0), api.value(1)]) 表示 dataItem 中的数值转换成坐标系上的点。
        */
          // 设置三角形的点的坐标(x,y)
          const endPoint = api.coord([api.value(0), 0]);
          // 返回值, 用于创建自定义形状
          return {
            type: 'group', // 组(包含两个三角形)  'group' 是唯一的可以有子节点的容器。'group' 可以用来整体定位一组图形元素。
            children: [
              // 使用svg的path路径绘制三角形
              {
                //可使用 SVG PathData 做路径。 可以用来画图标，或者其他各种图形，因为可以很便捷得缩放以适应给定尺寸。
                type: 'path',
                shape: {
                  d: 'M511.744 319.999l-383.744 383.744h767.488l-383.744-383.744z',
                  x: endPoint[0] - 5,
                  y: 35,
                  width: 10,
                  height: 10,
                  layout: 'cover',
                },
                style: {
                  fill: 'green',
                },
              },
              {
                type: 'path',
                shape: {
                  d: 'M889.696 320.8H158.848l365.504 365.536 365.344-365.536z',
                  x: endPoint[0] - 5,
                  y: 5,
                  width: 10,
                  height: 10,
                  layout: 'cover',
                },
                style: {
                  fill: 'green',
                },
              },
            ],
          };
        },
      },
    ],
  };
};

watch(props, () => {
  rederChart(props.reportData.userLastMonth, props.reportData.userToday);
});
</script>

<style scoped>
.wrapper {
  display: flex;
  gap: 10px;
}
</style>
